<template>
  <div class="w">
    <!-- 介绍区 -->
    <div class="desc-area">
      <a href="#" style="text-decoration: underline; color: #B30000;">关于我们</a>
    </div>

    <!-- 登录区 -->
    <div class="login-area">

      <div style="font-size: 16px; color: #B30000; text-align: center;">账户密码登录</div>

      <Input class="input_user" placeholder="账户" v-model="loginInfo.username" allowClear :addonAfter="icon_user"/>
      <Input class="input_pass" placeholder="密码" v-model="loginInfo.password" allowClear :addonAfter="icon_pass" type="password" />

      <div class="code-area">
        <Input class="input_code" v-model="loginInfo.code" placeholder="验证码" />
        <img :src="codeUrl" @click="getCode" class="provide_code"/>
        <!-- <Input class="provide_code" disabled /> -->
      </div>

      <div class="check-area">
        <Checkbox v-model="saveUser">记住用户名</Checkbox>
        <Checkbox v-model="savePass">记住密码</Checkbox>
        <!-- <a href="#" style="margin-left: 120px; color: #B30000;">忘记密码</a> -->
      </div>
      <Button class="login-btn" type="primary" @click="sendLogin">登  录</Button>

    </div>
  </div>
</template>

<script>
import { Icon } from '@uni/vue';
import { getCodeImg } from "@/api/login";
import Cookies from "js-cookie";
import { encrypt, decrypt } from '@/utils/jsencrypt';
import { Notification, Message } from '@uni/vue';
export default {
  name: "app",
  data() {
    return {
      codeUrl: "",
      icon_user: this.$createElement(Icon, {attrs: { name: 'user' }}),
      icon_pass: this.$createElement(Icon, {attrs: { name: 'password' }}),
      loginInfo: {
        username: "",
        password: "",
        code: "",
        uuid: ""
      },
      saveUser: false,
      savePass: false,
       // 验证码开关
      captchaOnOff: true,
    }
  },
   watch: {
    $route: {
      handler: function(route) {
        this.redirect = route.query && route.query.redirect;
      },
      immediate: true
    }
  },
  created() {
    this.getCode();
    this.getCookie()
  },
  methods: {
    getCode() {
      getCodeImg().then(res => {
        console.log('res：', res)
        this.captchaOnOff = res.captchaOnOff === undefined ? true : res.captchaOnOff;
        if (this.captchaOnOff) {
          this.codeUrl = "data:image/gif;base64," + res.img;
          this.loginInfo.uuid = res.uuid;
        }
      });
    },
    getCookie() {
      const username = Cookies.get("username");
      const password = Cookies.get("password");
      const savePass = Cookies.get('savePass')
      const saveUser = Cookies.get('saveUser')
      console.log(username, password)
      if(username !== undefined) this.saveUser = true;
      if(password !== undefined) this.savePass = true;
      this.loginInfo = {
        username: username === undefined ? this.loginInfo.username : username,
        password: password === undefined ? this.loginInfo.password : decrypt(password),
      };
      this.savePass = savePass === undefined ? false : Boolean(savePass)
      this.saveUser = saveUser === undefined ? false : Boolean(saveUser)
    },
    setCookie() {
        if (this.saveUser) {
            Cookies.set("username", this.loginInfo.username, { expires: 30 });
            Cookies.set("saveUser", this.saveUser, { expires: 30 });
          } else {
            Cookies.remove("username");
            Cookies.remove("saveUser");
        }
        if (this.savePass) {
            Cookies.set("password",  encrypt(this.loginInfo.password), { expires: 30 });
            Cookies.set("savePass", this.savePass, { expires: 30 });
          } else {
            Cookies.remove("password");
             Cookies.remove("savePass");
        }
    },
    sendLogin() {
      const Bol = this.validateForm()
      if(!Bol) return;
      this.setCookie()
      this.$store.dispatch("Login", this.loginInfo).then(() => {
          // this.$router.push({path: "/"})
          this.$router.push({ path: this.redirect || "/" }).catch(()=>{});
        }).catch(res => {
          console.log(res)
          // Message.warning({ text: res.msg });
          if (this.captchaOnOff) {
              this.getCode();
          }
        })
    },
    validateForm() {
      if(!this.loginInfo.username) {
      Notification.error({
        message: '没有填写用户名',
        description: '没有填写用户名',
      })        
         return false
      }else if(!this.loginInfo.password) {
       Notification.error({
        message: '没有填写密码',
        description: '没有填写密码',
      })             
         return false
      }else if(!this.loginInfo.code) {
       Notification.error({
        message: '没有填写验证码',
        description: '没有填写验证码',
      })             
         return false
      }
      return true;
    },
  }
}
</script>

<style scoped lang="scss">
  .w {
    position: relative;
    background-image: url(../../assets/images/login.jpg);
    margin: 0 auto;
    display: flex;
    /* -webkit-box-pack: center; */
    -ms-flex-pack: center;
    justify-content: center;
    // /* -webkit-box-align: center; */
    -ms-flex-align: center;
    align-items: center;
    height: 100%;
    background-size: cover;
  }

  /* 介绍区 */
  .desc-area {
    position: absolute;
    /* border: 1px gray dotted; */
    // left: 240px;
    // top: 410px;
    left: 17.5%;
    bottom: 18%;
    width: 255px;
    height: 135px;
  }
  .desc-area a {
    display: inline-block;
    position: absolute;
    bottom: 2px;
    font-size: 14px;
  }

  /* 登录区 */
  .login-area {
    position: absolute;
    /* border: 1px gray dotted; */
    background-color: #FBFCFF;
    box-shadow: 2px 2px 2px lightgray;
    left: 60%;
    // top: 20%;
    top: 50%;
    transform: translateY(-50%);
    width: 420px;
    height: 420px;
    padding-top: 35px;
  }
  .input_user, 
  .input_pass,
  .code-area,
  .check-area,
  .login-btn {
    width: 368px;
    margin-left: 26px;
    margin-top: 32px;
  }
   .code-area {
     display: flex;
   }
  .input_user {
    margin-top: 35px;
  }
  .input_code {
    width: 179px;
  }
  .provide_code {
    margin-left: 10px;
    width: 179px;
    height: 42px;
  }
  .check-area {
    margin-top: 20px;
    /* border: 1px dotted red; */
  }
  .login-btn {
    margin-top: 25px;
    height: 40px;
  }
::v-deep .uni-input-group{
  height: 42px;
  .uni-input-allowClear {
    height: 42px;
  }
}
::v-deep .uni-input {
  height: 42px;
}
</style>
